<template>
  <div class="bg-gradient-to-br from-gray-900 to-gray-800 text-gray-100 font-sans antialiased flex flex-col min-h-screen p-4">
    <!-- 导航栏 -->
    <header class="w-full max-w-7xl mx-auto bg-gray-800 rounded-xl shadow-2xl p-4 mb-4 flex justify-between items-center border border-gray-700">
      <div class="flex items-center">
        <i class="fas fa-brain text-purple-400 text-3xl mr-3"></i>
        <h1 class="text-3xl font-extrabold text-gray-100">知链408</h1>
      </div>
      <nav>
        <ul class="flex space-x-6">
          <li>
            <a class="text-gray-300 hover:text-purple-400 transition-colors duration-200 text-lg" href="javascript:void(0);">
              首页
            </a>
          </li>
          <li>
            <a class="text-gray-300 hover:text-purple-400 transition-colors duration-200 text-lg" href="javascript:void(0);">
              错题本
            </a>
          </li>
          <li>
            <a class="text-gray-300 hover:text-purple-400 transition-colors duration-200 text-lg" href="javascript:void(0);">
              统计
            </a>
          </li>
        </ul>
      </nav>
      <div class="relative group" @click="toggleUserDropdown">
        <div class="flex items-center space-x-3 cursor-pointer">
          <img alt="用户头像" class="w-10 h-10 rounded-full border-2 border-purple-500 object-cover" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/dcd3ec48b6541795b1051cfb1db27d66.png" />
          <span class="text-lg font-semibold text-gray-200"> 小柯 </span>
          <i class="fas fa-chevron-down text-gray-400 text-sm transition-transform duration-200"></i>
        </div>
        <div :class="{ 'hidden':!isUserDropdownVisible, 'absolute right-0 mt-2 w-48 bg-gray-700 rounded-md shadow-lg py-1 z-20': true }">
          <a class="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-600" href="javascript:void(0);">
            个人中心
          </a>
          <a class="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-600" href="javascript:void(0);">
            设置
          </a>
          <a class="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-600" href="javascript:void(0);">
            退出登录
          </a>
        </div>
      </div>
    </header>
    <SubjectsComponent></SubjectsComponent>
    <PractiseComponent></PractiseComponent>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import PractiseComponent from '@/components/PractiseComponent.vue'
import SubjectsComponent from '@/components/SubjectsComponent.vue';
// 用户下拉菜单显示状态
const isUserDropdownVisible = ref(false);

// 切换用户下拉菜单显示状态
const toggleUserDropdown = (event) => {
  event.stopPropagation();
  isUserDropdownVisible.value = !isUserDropdownVisible.value;
};

// 页面加载时初始化事件
onMounted(() => {
  document.addEventListener('click', (event) => {
    const userMenu = document.querySelector('.group');
    const userDropdown = document.querySelector('.absolute');
    if (userMenu && userDropdown) {
      if (!userMenu.contains(event.target) && !userDropdown.contains(event.target)) {
        isUserDropdownVisible.value = false;
      }
    }
  });
});
</script>

<style scoped>
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>